<route lang="yaml">
	name: home
	meta:
	title: 主页
	icon: ant-design:home-twotone
</route>

<script setup lang="ts">
	import * as Echarts from 'echarts'
	import { ref, watch } from 'vue'

	import useSettingsStore from '@/store/modules/settings'
	import dataApi from '@/api/zhitan/datas.ts'
	const ico5 = new URL('@/assets/images/ico-s.png', import.meta.url).href
	const ico6 = new URL('@/assets/images/ico-x.png', import.meta.url).href

	const settingsStore : any = useSettingsStore()
	const colorScheme : any = ref(settingsStore.settings.app.colorScheme)
	console.log(settingsStore.settings.app.colorScheme, '颜色主题')

	const radio1 : any = ref('月')
	const radio2 : any = ref('销量')
	const radio3 : any = ref('金额')

	const size = ref<'default' | 'large' | 'small'>('default')

	const value1 = ref('')

	const currentMonth01 : any = ref(new Date().getMonth() + 1) // getMonth() 返回的月份是从0开始的，所以需要加1
	const currentYear : any = ref(new Date().getFullYear())
	const currentMonth : any = ref(`${currentYear.value + '-' + currentMonth01.value}`) // getMonth() 返回的月份是从0开始的，所以需要加1
	const showmouandyear : any = ref(false)
	const activeidx : any = ref(2)
	const dateObj : any = ref({})
	const selectList : any = ref([
		{
			id: 1,
			name: '昨日',
			start_time: getStartEndTimestampsForYesterday(true),
			end_time: getStartEndTimestampsForYesterday(false),
		},
		{
			id: 2,
			name: '今日',
			start_time: getStartEndTimestampsForToday(true),
			end_time: getStartEndTimestampsForToday(false),
		},
		{
			id: 3,
			name: '本周',
			start_time: getStartEndTimestampsForWeek(true),
			end_time: getStartEndTimestampsForWeek(false),
		},
		{
			id: 4,
			name: '本月',
			start_time: getStartEndTimestampsForMonth(true),
			end_time: getStartEndTimestampsForMonth(false),
		},
		{
			id: 5,
			name: '本年',
			start_time: getStartEndTimestampsForYear(true),
			end_time: getStartEndTimestampsForYear(false),
		},
		{
			id: 6,
			name: '累计',
			start_time: 0,
			end_time: 0,
		},
		{
			id: 7,
			name: '自定义',
			start_time: 0,
			end_time: 0,
		}
	])
	const isshowpage : any = ref(true)
	const paging : any = ref({
		page: 1,
		limit: 10
	})
	const isshowpage1 : any = ref(true)
	const paging1 : any = ref({
		page: 1,
		limit: 10
	})


	const monthsList : any = ref([])
	const yearsRange : any = ref([])

	// 今日统计
	const toDayStatData : any = ref({})
	// 交易数据统计
	const dealStatData : any = ref({})
	// 交易数据折线图统计
	const dealLineStatData : any = ref({
		dates: [],
		check_order_money: [],
		check_order_num: [],
		pay_user_num: [],
		refund_order_num: [],
		user_num: [],
	})
	// 产品看板
	const productStatData : any = ref({
		product_all_data: [],
		putaway_data: [],
		out_data: [],
		underway_data: [],
		presell_data: [],
		wait_data: [],
	})
	const productStatDataNum : any = ref({
		product_all_data: 0,
		putaway_data: 0,
		out_data: 0,
		underway_data: 0,
		presell_data: 0,
		wait_data: 0,
	})
	// 订单看板
	const orderStatData : any = ref({})
	// 销量排行
	const salesRankingStatData : any = ref([])
	const allsalesRankingStatData : any = ref([])
	const allnoarrsalesRankingStatData : any = ref([])

	// 用户购买力排行
	const purchasingPowerStatData : any = ref([])
	const allpurchasingPowerStatData : any = ref([])
	const allnoarrpurchasingPowerStatData : any = ref([])


	const chart1Ref = ref()
	const chart2Ref = ref()
	let chart1 : any
	let chart2 : any
	watch(settingsStore.settings.app, (newVal, oldVal) => {
		colorScheme.value = settingsStore.settings.app.colorScheme
		initChart1()
		initChart2()
		console.log(111)
		console.log(colorScheme.value)
	})

	const loadingRef : any = ref(null)
	const isshowdata : any = ref(false)

	onMounted(() => {

		generateMonths()
		years()

		dateObj.value = {
			start_time: selectList.value[2].start_time,
			end_time: selectList.value[2].end_time
		}
		gettoDayStat()
		getdealStat()
		getdealLineStat()


		setTimeout(() => {
			console.log(selectList.value, 'selectListselectList')
			initChart2()
			window.addEventListener('resize', () => {
				chart2.resize()
			})
		}, 2000)

		getproductStat()
		getorderStat()
		getsalesRankingStat()
		getpurchasingPowerStat()
		loadingRef.value.open(1500)
		isshowdata.value = false
		setTimeout(() => {
			isshowdata.value = true
		}, 1500)

	})
	function changeType() {
		console.log(radio1.value, 'radio1.value')
		getdealLineStat()
		setTimeout(() => {
			console.log(selectList.value, 'selectListselectList')
			initChart2()
			window.addEventListener('resize', () => {
				chart2.resize()
			})
		}, 1000)
	}
	function subShowmouandyear(it : any) {
		if (radio1.value === '月') {
			currentMonth.value = it
		} else {
			currentYear.value = it
		}
		getdealLineStat()
		setTimeout(() => {
			console.log(selectList.value, 'selectListselectList')
			initChart2()
			window.addEventListener('resize', () => {
				chart2.resize()
			})
		}, 1000)
		showmouandyear.value = false
	}
	function gettoDayStat() {
		dataApi.toDayStat({}).then((res : any) => {
			console.log(res, 'res3')
			toDayStatData.value = res
		})
	}
	function getdealStat() {
		dataApi.dealStat(dateObj.value).then((res : any) => {
			console.log(res, 'getdealStat')
			dealStatData.value = res
		})
	}
	function getproductStat() {
		dataApi.productStat({}).then((res : any) => {
			console.log(res, 'productStat')
			res.product_all_data.forEach((o : any) => {
				productStatDataNum.value.product_all_data += o.num
			})
			res.putaway_data.forEach((o : any) => {
				productStatDataNum.value.putaway_data += o.num
			})
			res.out_data.forEach((o : any) => {
				productStatDataNum.value.out_data += o.num
			})
			res.underway_data.forEach((o : any) => {
				productStatDataNum.value.underway_data += o.num
			})
			res.presell_data.forEach((o : any) => {
				productStatDataNum.value.presell_data += o.num
			})
			res.wait_data.forEach((o : any) => {
				productStatDataNum.value.wait_data += o.num
			})
			productStatData.value = res
		})
	}
	function getorderStat() {
		dataApi.orderStat({}).then((res : any) => {
			console.log(res, 'orderStat')
			orderStatData.value = res
		})
	}
	function paginatedItems(arrs : any) {
		const pageSize = 10;
		const pages = [];

		for (let i = 0; i < arrs.length; i += pageSize) {
			const page = arrs.slice(i, i + pageSize);
			pages.push(page);
		}

		return pages;
	}
	function getsalesRankingStat() {
		dataApi.salesRankingStat({}).then((res : any) => {
			isshowpage.value = false
			setTimeout(() => {
				isshowpage.value = true
				paging.page = 1
			}, 10)

			if (radio2.value === '销量') {
				res.data.sort((a : any, b : any) => {
					// 如果销量相同，保持原始顺序（稳定排序）
					if (a.sales_volume === b.sales_volume) {
						return 0;
					}
					// 从大到小排序
					return b.sales_volume - a.sales_volume;
				});
			} else {
				res.data.sort((a : any, b : any) => {
					// 如果销量相同，保持原始顺序（稳定排序）
					if (a.money === b.money) {
						return 0;
					}
					// 从大到小排序
					return b.money - a.money;
				});
			}
			// salesRankingStatData.value = res.data
			allnoarrsalesRankingStatData.value = res.data
			allsalesRankingStatData.value = paginatedItems(res.data)
			salesRankingStatData.value = paginatedItems(res.data)[0]
		})
	}
	function getpurchasingPowerStat() {
		dataApi.purchasingPowerStat({}).then((res : any) => {
			console.log(res, 'purchasingPowerStat')
			isshowpage1.value = false
			setTimeout(() => {
				isshowpage1.value = true
				paging1.page = 1
			}, 10)
			if (radio2.value === '金额') {
				res.data.sort((a : any, b : any) => {
					// 如果销量相同，保持原始顺序（稳定排序）
					if (a.money === b.money) {
						return 0;
					}
					// 从大到小排序
					return b.money - a.money;
				});
			} else {
				res.data.sort((a : any, b : any) => {
					// 如果销量相同，保持原始顺序（稳定排序）
					if (a.order_num === b.order_num) {
						return 0;
					}
					// 从大到小排序
					return b.order_num - a.order_num;
				});
			}
			// purchasingPowerStatData.value = res.data
			allnoarrpurchasingPowerStatData.value = res.data
			allpurchasingPowerStatData.value = paginatedItems(res.data)
			purchasingPowerStatData.value = paginatedItems(res.data)[0]
		})
	}



	function getdealLineStat() {
		dataApi.dealLineStat({
			unit: radio1.value === '月' ? 1 : 2, date: radio1.value === '月' ?
				currentMonth.value : currentYear.value

		}).then((res : any) => {
			dealLineStatData.value = {
				dates: [],
				check_order_money: [],
				check_order_num: [],
				pay_user_num: [],
				refund_order_num: [],
				user_num: [],
			}
			res.data.forEach((i : any, j : any) => {
				dealLineStatData.value.dates.push(i.date)
				dealLineStatData.value.check_order_money.push(i.stat.check_order_money / 100)
				dealLineStatData.value.check_order_num.push(i.stat.check_order_num)
				dealLineStatData.value.pay_user_num.push(i.stat.pay_user_num)
				dealLineStatData.value.refund_order_num.push(i.stat.refund_order_num)
				dealLineStatData.value.user_num.push(i.stat.user_num)
			})
			// dealLineStatData.value = res.data
			console.log(dealLineStatData.value, 'getdealLineStat')
		})
	}

	function generateMonths() {
		const currentYear = new Date().getFullYear();
		monthsList.value = Array.from({ length: 12 }, (_ : any, i : any) => {
			const month = i + 1;
			return `${currentYear} -${month.toString().padStart(2, '0')} `;
		});
	}
	function years() {
		const currentYear = new Date().getFullYear();
		yearsRange.value = [];

		for (let i = -10; i <= 9; i++) {
			yearsRange.value.push(currentYear + i);
		}

	}
	function getStartEndTimestampsForYesterday(isStart : any) {
		const now = new Date();
		const yesterday = new Date(now.setDate(now.getDate() - 1));
		return getTimestamp(yesterday, isStart);
	}
	function getStartEndTimestampsForToday(isStart : any) {
		const today = new Date();
		return getTimestamp(today, isStart);
	}
	function getStartEndTimestampsForWeek(isStart : any) {
		const now = new Date();
		const dayOfWeek = now.getDay(); // 星期天为0，星期一为1，依此类推
		const startOfWeek = new Date(now.setDate(now.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1)));
		if (isStart) {
			return getTimestamp(startOfWeek, true);
		} else {
			const endOfWeek = new Date(startOfWeek);
			endOfWeek.setDate(startOfWeek.getDate() + 6);
			return getTimestamp(endOfWeek, false);
		}
	}
	function getStartEndTimestampsForMonth(isStart : any) {
		const now = new Date();
		const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
		if (isStart) {
			return getTimestamp(startOfMonth, true);
		} else {
			const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0);
			return getTimestamp(endOfMonth, false);
		}
	}
	function getStartEndTimestampsForYear(isStart : any) {
		const now = new Date();
		const startOfYear = new Date(now.getFullYear(), 0, 1);
		if (isStart) {
			return getTimestamp(startOfYear, true);
		} else {
			const endOfYear = new Date(now.getFullYear(), 11, 31);
			return getTimestamp(endOfYear, false);
		}
	}
	function getTimestamp(date : any, isStart : any) {
		date.setHours(isStart ? 0 : 23);
		date.setMinutes(isStart ? 0 : 59);
		date.setSeconds(isStart ? 0 : 59);
		date.setMilliseconds(isStart ? 0 : 999);
		return Math.floor(date.getTime() / 1000); // 获取十位时间戳
	}



	function initChart1() {
		chart1 = Echarts.init(chart1Ref.value)
		// 配置数据
		const option = {
			tooltip: {
				trigger: 'axis',
				axisPointer: { // 坐标轴指示器，坐标轴触发有效
					type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
				},
			},
			legend: {
				textStyle: {
					fontSize: 12,
					color: colorScheme.value === 'light' ? '#333' : '#fff',
				},
				data: ['支付金额', '订单数量'],
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true,
			},
			xAxis: [
				{
					type: 'category',
					data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '22:00', '23:00'],
					axisLabel: {
						textStyle: {
							color: colorScheme.value === 'light' ? '#333' : '#fff',
							fontSize: 12,
						},
					},
				},
			],
			yAxis: [
				{
					type: 'value',
					axisLabel: {
						textStyle: {
							color: colorScheme.value === 'light' ? '#333' : '#fff',
							fontSize: 12,
						},
					},
				},

			],
			series: [
				{
					barWidth: 20, // 柱状图宽度
					name: '支付金额',
					type: 'bar',
					data: [320, 332, 301, 334, 390, 330, 320, 332, 301, 334],
				},
				{
					barWidth: 20, // 柱状图宽度
					name: '订单数量',
					type: 'bar',
					data: [120, 132, 101, 134, 90, 230, 210, 132, 101, 134],
				},
			],
		}
		// 传入数据
		chart1.setOption(option)
	}
	function initChart2() {
		console.log(dealLineStatData.value, 'dealLineStatData.value')
		chart2 = Echarts.init(chart2Ref.value)
		// 配置数据
		const option = {
			title: {
				text: '',
			},
			tooltip: {
				trigger: 'line',
				axisPointer: {
					type: 'cross',
					lineStyle: {
						color: colorScheme.value === 'light' ? '#333' : '#fff',
					},
				},
			},
			legend: {
				textStyle: {
					fontSize: 12,
					color: colorScheme.value === 'light' ? '#333' : '#fff',
				},
				data: ['新增注册用户', '新增成交用户', '新增核销订单', '退款订单', '核销订单销售额'],
			},
			// toolbox: {
			//   feature: {
			//     saveAsImage: {},
			//   },
			// },
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true,
			},
			xAxis: [
				{
					type: 'category',
					boundaryGap: false,
					data: dealLineStatData.value.dates,
					axisLabel: {
						textStyle: {
							color: colorScheme.value === 'light' ? '#333' : '#fff',
							fontSize: 12,
						},
					},
				},
			],

			yAxis: [
				{
					type: 'value',
					axisLabel: {
						textStyle: {
							color: colorScheme.value === 'light' ? '#333' : '#fff',
							fontSize: 12,
						},
					},

				},
			],
			series: [
				{
					name: '新增注册用户',
					type: 'line',
					stack: '总量',
					areaStyle: {},
					data: dealLineStatData.value.user_num,
				},
				{
					name: '新增成交用户',
					type: 'line',
					stack: '总量',
					areaStyle: {},
					data: dealLineStatData.value.pay_user_num,
				},
				{
					name: '新增核销订单',
					type: 'line',
					stack: '总量',
					areaStyle: {},
					data: dealLineStatData.value.check_order_num,
				},
				{
					name: '退款订单',
					type: 'line',
					stack: '总量',
					areaStyle: {},
					data: dealLineStatData.value.refund_order_num,
				},
				{
					name: '核销订单销售额',
					type: 'line',
					stack: '总量',
					areaStyle: {},
					data: dealLineStatData.value.check_order_money,
				},
			],
		}
		// 传入数据
		chart2.setOption(option)
	}
	function changeSelect(item : any, idx : any) {
		if (idx <= 4) {
			dateObj.value = {
				start_time: item.start_time,
				end_time: item.end_time
			}
		} else if (idx === 5) {
			dateObj.value = {}
		}
		activeidx.value = idx
		getdealStat()
	}
	function changeDate(e : any) {
		console.log(e, 'changeDate')
		dateObj.value = {
			start_time: Math.floor(getstartDayTimestamps(e[0]) / 1000),
			end_time: Math.floor(getendDayTimestamps(e[1]) / 1000)
		}
		getdealStat()
	}

	function getstartDayTimestamps(timestamp : any) {
		let date = new Date(timestamp);
		date.setHours(0, 0, 0, 0);
		let startOfTheDay = date.getTime();
		return startOfTheDay
	}
	function getendDayTimestamps(timestamp : any) {
		let date = new Date(timestamp);
		date.setHours(23, 59, 59, 999);
		let endOfTheDay = date.getTime();
		return endOfTheDay
	}
	function pagChange(e : any) {
		console.log(e, '看看看看')
		salesRankingStatData.value = allsalesRankingStatData.value[e.page - 1]
	}
	function pagChange1(e : any) {
		console.log(e, '看看看看')
		purchasingPowerStatData.value = allpurchasingPowerStatData.value[e.page - 1]
	}
</script>

<template>
	<div style="padding: 20px;" class="relative w-full">
		<div class="w-full h-50vh" v-if="!isshowdata">
			<Loading ref="loadingRef" />
		</div>
		<div v-if="isshowdata">

			<el-card shadow="hover" class="grid-content">
				<div class="title">
					今日统计
				</div>
				<el-row :gutter="20">
					<el-col :xs="24" :sm="12" :md="12" :lg="6">
						<ColorfulCard color-from="#678de5" color-to="#2b62fe" header="新增注册用户"
							:num="toDayStatData.today_user_num" :tip="`累计注册用户：${toDayStatData.user_num}`"
							icon="ep:pie-chart" />
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="6">
						<ColorfulCard color-from="#fd8f51" color-to="#ff636c" header="新增成交用户"
							:num="toDayStatData.today_pay_num" :tip="`累计成交用户：${toDayStatData.pay_num}`"
							icon="ep:element-plus" />
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="6">
						<ColorfulCard color-from="#01ccd7" color-to="#2099ba" header="新增订单"
							:num="toDayStatData.today_order_num" :tip="`累计订单：${toDayStatData.order_num}`"
							icon="ri:pages-line" />
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="6">
						<ColorfulCard color-from="#ba6fe1" color-to="#7e41f0" header="销售额
" :num="toDayStatData.today_money/100" :tip="`累计销售额：${toDayStatData.money/100}`" icon="ep:link" />
					</el-col>
				</el-row>
			</el-card>
			<el-card shadow="hover" class="grid-content mt-4">
				<div class="title flex items-center">
					交易数据
					<div class="flex ml-6">
						<div @click="changeSelect(i,j)" v-for="(i,j) in selectList" :key="j"
							:class="j===activeidx?'activebg':''" class="px-4 mr-2 cursor-pointer font-size-4 c-[#333]"
							style="border:1px solid #999;">
							{{i.name}}
						</div>
						<div v-if="activeidx===6">
							<el-date-picker size="large" v-model="value1" type="daterange" range-separator="至"
								value-format="x" @change="changeDate" start-placeholder="开始日期" end-placeholder="结束日期"
								:size="size" />
						</div>
					</div>
					<div class="absolute top-0 right-1 flex items-center">
						<el-radio-group v-model="radio1" class="mr-4" @change="changeType">
							<el-radio-button label="月" />
							<el-radio-button label="年" />
						</el-radio-group>

						<el-popover :visible="showmouandyear" placement="right" :width="380" trigger="click"
							v-if="radio1==='月'">
							<template #reference>
								<el-button @click="showmouandyear = !showmouandyear">选择</el-button>
							</template>
							<div class="flex flex-wrap">
								<div class="px-6 py-4 cursor-pointer hoverbg" v-for="(it,jt) in monthsList" :key="jt"
									@click="subShowmouandyear(it)">
									{{it}}
								</div>
							</div>
						</el-popover>
						<el-popover :visible="showmouandyear" placement="right" :width="380" trigger="click"
							v-if="radio1==='年'">
							<template #reference>
								<el-button @click="showmouandyear = !showmouandyear">选择</el-button>
							</template>
							<div class="flex flex-wrap">
								<div class="px-6 py-4 cursor-pointer hoverbg" v-for="(it,jt) in yearsRange" :key="jt"
									@click="subShowmouandyear(it)">
									{{it}}
								</div>
							</div>
						</el-popover>

					</div>
				</div>
				<el-row :gutter="20">
					<el-col :xs="24" :sm="24" :md="24" :lg="6">
						<div class="font-size-5 mt-12">
							<div class="flex py-2 items-center">
								<div class="w-40" style="text-align: end;">
									新增注册用户：
								</div>{{dealStatData.user_num||0}}
							</div>
							<div class="flex py-2 items-center">
								<div class="w-40" style="text-align: end;">
									新增成交用户：
								</div>
								{{dealStatData.pay_user_num||0}}
							</div>
							<div class="flex py-2 items-center">
								<div class="w-40" style="text-align: end;">
									新增核销订单：
								</div>
								{{dealStatData.check_order_num||0}}
							</div>
							<div class="flex py-2 items-center">
								<div class="w-40" style="text-align: end;">
									退&nbsp&nbsp 款&nbsp&nbsp订&nbsp&nbsp单：
								</div>
								{{dealStatData.refund_order_num||0}}
							</div>
							<div class="flex py-2 items-center">
								<div class="w-40" style="text-align: end;">
									销&nbsp&nbsp&nbsp&nbsp&nbsp<span class="mx-0.25">售</span>&nbsp&nbsp&nbsp&nbsp&nbsp额：
								</div>
								{{dealStatData.check_order_money/100||0}}
							</div>
						</div>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="18" style="margin-top: 0px;">
						<div>
							<!-- <div class="mb-4 flex items-center justify-center">
							近七日，订单数量、新增会员
						</div> -->
							<div ref="chart2Ref" style="width: 100%; height: 300px;" />
						</div>
					</el-col>
				</el-row>
			</el-card>
			<el-card shadow="hover" class="grid-content mt-4">
				<div class="title">
					产品看板
				</div>
				<div>
					<el-row :gutter="20">
						<el-col :xs="24" :sm="24" :md="24" :lg="8">
							<div class="mb-6 flex w-full ">
								<div class="w-40 flex items-center justify-center d-c py-2"
									style="border-right: 4px solid #5470c6;">
									<div class="font-size-8 font-wight-700">
										{{productStatDataNum.product_all_data||0}}
									</div>
									<div class="font-size-6 mt-2">
										产品总数
									</div>
								</div>
								<div class="ml-4 w-60% ">
									<div class="flex w-full justify-between flex-wrap">
										<div class='flex items-center py-2'
											v-for="(item,index) in productStatData.product_all_data" :key='index'>
											<div class='w-1.5 h-1.5 border-radius-50% bg-[#333]'
												style="border-radius: 50%;">

											</div>
											<div class="mx-1">
												{{item.name}}
											</div>
											<div class="c-[#e67c28]">
												{{item.num}}
											</div>
										</div>
									</div>

								</div>
							</div>
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="8" style="margin-top: 0px;">
							<div class="mb-6 flex w-full ">
								<div class="w-40 flex items-center justify-center d-c py-2"
									style="border-right: 4px solid #5470c6;">
									<div class="font-size-8 font-wight-700">
										{{productStatDataNum.putaway_data||0}}
									</div>
									<div class="font-size-6 mt-2">
										上架产品
									</div>
								</div>
								<div class="ml-4 w-60% ">
									<div class="flex w-full justify-between flex-wrap">
										<div class='flex items-center py-2'
											v-for="(item,index) in productStatData.putaway_data" :key='index'>
											<div class='w-1.5 h-1.5 border-radius-50% bg-[#333]'
												style="border-radius: 50%;">

											</div>
											<div class="mx-1">
												{{item.name}}
											</div>
											<div class="c-[#e67c28]">
												{{item.num}}
											</div>
										</div>
									</div>

								</div>
							</div>
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="8" style="margin-top: 0px;">
							<div class="mb-6 flex w-full ">
								<div class="w-40 flex items-center justify-center d-c py-2"
									style="border-right: 4px solid #5470c6;">
									<div class="font-size-8 font-wight-700">
										{{productStatDataNum.out_data||0}}
									</div>
									<div class="font-size-6 mt-2">
										下架产品 </div>
								</div>
								<div class="ml-4 w-60% ">
									<div class="flex w-full justify-between flex-wrap">
										<div class='flex items-center py-2'
											v-for="(item,index) in productStatData.out_data" :key='index'>
											<div class='w-1.5 h-1.5 border-radius-50% bg-[#333]'
												style="border-radius: 50%;">

											</div>
											<div class="mx-1">
												{{item.name}}
											</div>
											<div class="c-[#e67c28]">
												{{item.num}}
											</div>
										</div>
									</div>

								</div>
							</div>
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="8" style="margin-top: 0px;">
							<div class="mb-6 flex w-full ">
								<div class="w-40 flex items-center justify-center d-c py-2"
									style="border-right: 4px solid #5470c6;">
									<div class="font-size-8 font-wight-700">
										{{productStatDataNum.underway_data||0}}
									</div>
									<div class="font-size-6 mt-2">
										在售产品
									</div>
								</div>
								<div class="ml-4 w-60% ">
									<div class="flex w-full justify-between flex-wrap">
										<div class='flex items-center py-2'
											v-for="(item,index) in productStatData.underway_data" :key='index'>
											<div class='w-1.5 h-1.5 border-radius-50% bg-[#333]'
												style="border-radius: 50%;">

											</div>
											<div class="mx-1">
												{{item.name}}
											</div>
											<div class="c-[#e67c28]">
												{{item.num}}
											</div>
										</div>
									</div>

								</div>
							</div>
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="8" style="margin-top: 0px;">
							<div class="mb-6 flex w-full ">
								<div class="w-40 flex items-center justify-center d-c py-2"
									style="border-right: 4px solid #5470c6;">
									<div class="font-size-8 font-wight-700">
										{{productStatDataNum.presell_data||0}}
									</div>
									<div class="font-size-6 mt-2">
										预售产品
									</div>
								</div>
								<div class="ml-4 w-60% ">
									<div class="flex w-full justify-between flex-wrap">
										<div class='flex items-center py-2'
											v-for="(item,index) in productStatData.presell_data" :key='index'>
											<div class='w-1.5 h-1.5 border-radius-50% bg-[#333]'
												style="border-radius: 50%;">

											</div>
											<div class="mx-1">
												{{item.name}}
											</div>
											<div class="c-[#e67c28]">
												{{item.num}}
											</div>
										</div>
									</div>

								</div>
							</div>
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="8" style="margin-top: 0px;">
							<div class="mb-6 flex w-full ">
								<div class="w-40 flex items-center justify-center d-c py-2"
									style="border-right: 4px solid #5470c6;">
									<div class="font-size-8 font-wight-700">
										{{productStatDataNum.wait_data||0}}
									</div>
									<div class="font-size-6 mt-2">
										待售产品
									</div>
								</div>
								<div class="ml-4 w-60% ">
									<div class="flex w-full justify-between flex-wrap">
										<div class='flex items-center py-2'
											v-for="(item,index) in productStatData.wait_data" :key='index'>
											<div class='w-1.5 h-1.5 border-radius-50% bg-[#333]'
												style="border-radius: 50%;">

											</div>
											<div class="mx-1">
												{{item.name}}
											</div>
											<div class="c-[#e67c28]">
												{{item.num}}
											</div>
										</div>
									</div>

								</div>
							</div>
						</el-col>
					</el-row>
				</div>
			</el-card>
			<el-card shadow="hover" class="grid-content mt-4">
				<div class="title">
					订单看板
				</div>
				<div>
					<el-row :gutter="20">
						<el-col :xs="24" :sm="24" :md="24" :lg="24">
							<div>

								<div class="mb-6 flex w-full ">
									<div class="w-40 flex items-center justify-center d-c py-2"
										style="border-right: 4px solid #5470c6;">
										<div class="font-size-8 font-wight-700">
											{{orderStatData.order_all_num||0}}
										</div>
										<div class="font-size-6 mt-2">
											订单总数
										</div>
									</div>
									<div class="ml-4 w-60% ">
										<div class="flex w-full justify-between flex-wrap">
											<div class='flex d-c items-center py-2'
												v-for="(item,index) in orderStatData.group_data" :key='index'>
												<div class='flex items-center py-2'>
													<div class='w-1.5 h-1.5 border-radius-50% bg-[#333]'
														style="border-radius: 50%;">

													</div>
													<div class="mx-1">
														{{item.name}}
													</div>
													<div class="c-[#e67c28]">
														{{item.num}}
													</div>
												</div>
												<div class='flex  w-full py-2'>
													<div class="c-[#e67c28] w-full" style="text-align: start;">
														￥{{item.money/100}}
													</div>
												</div>
											</div>
										</div>

									</div>
								</div>
								<div class="flex w-full flex-wrap">
									<div class='flex items-center py-2 px-6'>
										<div class='w-1.5 h-1.5 border-radius-50% bg-[#333]'
											style="border-radius: 50%;">

										</div>
										<div class="mx-1">
											已核销
										</div>
										<div class="c-[#e67c28]">
											{{orderStatData.order_check_num||0}}
										</div>
									</div>
									<div class='flex items-center py-2 px-6'>
										<div class='w-1.5 h-1.5 border-radius-50% bg-[#333]'
											style="border-radius: 50%;">

										</div>
										<div class="mx-1">
											待使用
										</div>
										<div class="c-[#e67c28]">
											{{orderStatData.order_used_num||0}}
										</div>
									</div>
									<div class='flex items-center py-2 px-6'>
										<div class='w-1.5 h-1.5 border-radius-50% bg-[#333]'
											style="border-radius: 50%;">

										</div>
										<div class="mx-1">
											退费申请中
										</div>
										<div class="c-[#e67c28]">
											{{orderStatData.order_apply_num||0}}
										</div>
									</div>
									<div class='flex items-center py-2 px-6'>
										<div class='w-1.5 h-1.5 border-radius-50% bg-[#333]'
											style="border-radius: 50%;">

										</div>
										<div class="mx-1">
											已退费
										</div>
										<div class="c-[#e67c28]">
											{{orderStatData.order_refund_num||0}}
										</div>
									</div>
									<div class='flex items-center py-2 px-6'>
										<div class='w-1.5 h-1.5 border-radius-50% bg-[#333]'
											style="border-radius: 50%;">

										</div>
										<div class="mx-1">
											拒绝退费
										</div>
										<div class="c-[#e67c28]">
											{{orderStatData.order_refuse_num||0}}
										</div>
									</div>
								</div>

							</div>
						</el-col>
					</el-row>
				</div>
			</el-card>
			<el-card shadow="hover" class="grid-content mt-4">
				<el-row>
					<el-col :span="8">
						<div class="title">
							排行榜
						</div>
					</el-col>

				</el-row>
				<div>
					<el-row :gutter="20">
						<el-col :xs="24" :sm="24" :md="24" :lg="12">
							<div>
								<h3>销量排行榜</h3>
								<el-radio-group v-model="radio2" @change="getsalesRankingStat()">
									<el-radio-button label="销量" />
									<el-radio-button label="金额" />
								</el-radio-group>

								<el-table class="mt-4" :data="salesRankingStatData" border style="width: 100%">
									<el-table-column type="index" label="排行" width="100" align="center" />
									<el-table-column prop="name" label="产品名称" min-width="180">
										<template #default="scope">
											<div class="flex items-center">
												<image-preview :src="scope.row.image" :width="60" :height="40" />
												<span class="ml-2">{{scope.row.name}}</span>
											</div>
										</template>
									</el-table-column>
									<el-table-column prop="sales_volume" label="销量" width="120" align="center" />
									<el-table-column prop="money" label="销售额" width="120" align="center">
										<template #default="scope">
											<div class="flex justify-center items-center"> {{scope.row.money/100}}
											</div>
										</template>
									</el-table-column>
								</el-table>
								<div class="mt-4" v-if="isshowpage">
									<page-compon :page="paging.page" :size="10"
										:total="allnoarrsalesRankingStatData.length" small
										layout="total,  prev, pager, next, jumper" style="margin-top: 16px;"
										@pag-change="pagChange" />
								</div>
							</div>
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="12" style="margin-top: 0px;">
							<div>
								<h3>用户购买力排行榜</h3>
								<el-radio-group v-model="radio3" @change="getpurchasingPowerStat()">
									<el-radio-button label="金额" />
									<el-radio-button label="订单" />
								</el-radio-group>

								<el-table class="mt-4" :data="purchasingPowerStatData" border style="width: 100%">
									<el-table-column type="index" label="排行" width="100" align="center" />
									<el-table-column prop="nick_name" label="用户信息" min-width="180">
										<template #default="scope">
											<div class="flex items-center">
												<image-preview :src="scope.row.avatar" :width="40" :height="40" />
												<span class="ml-2">{{scope.row.nick_name}}</span>
											</div>
										</template>
									</el-table-column>
									<el-table-column prop="money" label="消费金额" width="120" align="center">
										<template #default="scope">
											<div class="flex justify-center items-center"> {{scope.row.money/100}}
											</div>
										</template>
									</el-table-column>
									<el-table-column prop="order_num" label="订单数" width="120" align="center" />
								</el-table>
								<div class="mt-4" v-if="isshowpage1">
									<page-compon :page="paging1.page" :size="10"
										:total="allnoarrpurchasingPowerStatData.length" small
										layout="total,  prev, pager, next, jumper" style="margin-top: 16px;"
										@pag-change="pagChange1" />
								</div>
							</div>
						</el-col>
					</el-row>
				</div>
			</el-card>
		</div>
	</div>
</template>

<style lang="scss" scoped>
	:deep(.mini-card) {
		text-shadow: none;
		transition: all 0.3s ease;
	}

	.hoverbg:hover {
		background-color: #f5f5f5;
	}

	.mini-card:hover {
		// box-shadow: 0 14px 24px rgb(0 0 0 / 20%);
		// box-shadow: 0 14px 24px #0003;
		// z-index: 999;
		border-radius: 6px;
		transform: translateY(-4px) scale(1);
	}

	:deep(.mini-card .icon)[data-v-c1c6d446] {
		top: -25px;
		right: -25px;
		font-size: 100px;
	}

	.activebg {
		background-color: #5470c6;
		border: 1px solid #5470c6;
		color: #fff;
	}

	.el-card.grid-content {
		// box-shadow: 0 0 1px 0 var(--el-border-color);
		// border-radius: 6px;
		padding: 10px 16px 16px;
		background-color: #fff;
		border: none;
		// transition: var(--el-transition-duration);

		.title {
			position: relative;
			height: 40px;
			padding-left: 16px;
			margin-bottom: 14px;
			font-size: 20px;
			line-height: 40px;
		}

		.title::before {
			position: absolute;
			top: 50%;
			left: 0;
			width: 4px;
			height: 20px;
			content: "";
			background: #475ddb;
			border-radius: 4px;
			transform: translateY(-50%);
		}
	}

	:deep(.el-card.grid-content>.el-card__body) {
		padding: 0;
	}

	.gaikuang>div {
		width: calc(100% / 3);
		padding: 10px 16px;
	}

	.gaikuang .tit {
		font-size: 16px;
	}

	.gaikuang .num {
		font-size: 26px;
	}

	.gaikuang .txt {
		margin-top: 10px;
		font-size: 14px;
		color: var(--el-text-color-secondary);
	}

	.gaikuang .txt>.ico {
		width: 14px;
		height: 14px;
		margin-left: 6px;
	}

	:deep(.el-date-editor) {
		width: 230px;
	}
</style>